<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">组织结构</el-menu-item>
        </el-menu>
        <el-tree
          class="filter-tree"
          :data="list"
          style="margin: 20px 0"
          :props="defaultProps"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <span>{{ data.manager }}</span>
              <el-dropdown style="margin-left: 20px">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                  <el-dropdown-item>查看部门</el-dropdown-item>
                  <el-dropdown-item>删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getdepartmentListAPI } from '@/api/departments'
export default {
  name: 'departments',
  data () {
    return {
      companyName: '',
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    async getdepartmentlist () {
      const {
        data: { data }
      } = await getdepartmentListAPI()
      this.list = this.fomaterList(data.depts, '')
    },
    fomaterList (list, val) {
      const arr = []
      list.forEach(item => {
        // 确定一级数据
        if (item.pid === val) {
          // 当前一级id与所有数据比较获取相同的二级
          const chidrens = this.fomaterList(list, item.id)
          // 将获取的二级数据添加到当前的数据段
          item.children = chidrens
          arr.push(item)
        }
      })
      return arr
    }
  },
  created () {
    this.getdepartmentlist()
  }
}
</script>

<style scoped lang="scss">
// tree数据样式两边对齐
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
// 下拉展开样式
::v-deep .el-tree-node__expand-icon.is-leaf {
  color: #ccc;
}
</style>
